<template>
  <div class="login_bigbox">
    <h2>强盛集团<br>莽村项目后台管理系统</h2>
        <div class="login_box">
            <h1>
              <i class="el-icon-user"></i>
              用户登陆系统
            </h1>
            <div class="login_box1">
                <label for="">账号：</label>
                <input type="text" v-model="userId"   placeholder="请输入登陆账号"  >
            </div>
            <div class="login_box2">
                <label for="">密码：</label>
                <input type="password" v-model="userPs"  placeholder="密码"  >
            </div>
            <div class="login_bt">
                <button  @click="go">登陆</button> 
                
            </div>
            <div class="login_bt1">
                <button  @click="zhuce()">注册</button> 
            </div>
        </div>
   
  </div>
</template>
<script>
export default {
  name: "Login",
  
  data() {
      return {
          userId: "",
          userPs: "",
          
        
      }
  
  },
  methods: {
    go() {
      sessionStorage.setItem("userId", this.userId);
      sessionStorage.setItem("userPs", this.userPs);

    
    if(sessionStorage.getItem('userId') == 'aw666' && sessionStorage.getItem('userPs')== '123'){
      this.$message({
          message: '登陆成功',
          type: 'success',
        });
        this.$router.push({
        name: "list",
        
      });
        
    }else{
      this.$message.error('账号或者密码输入错误');
    }
    




      // this.$message({
      //     message: '恭喜你，这是一条成功消息',
      //     type: 'success'
      //   });
      // this.$router.push({
      //   name: "list",
      // });
    },
    
    
    beforeDestroy() {
      console.log('后台被清除了');
    },
    

    zhuce(){
        this.$router.push({
            path:'/Register'
        })
    }
  },

};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
h2 {
  color: aliceblue;
  font-size: 50px;
  position: absolute;
  top: 30px;
  left: 30px;
}

.login_bigbox h1 {
  color: aliceblue;
  font-size: 50px;
}
.login_bigbox {
  background: url(../img/R-A.jpg) no-repeat; 
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-size: cover;
}

.login_box {
  position: absolute;
  position: absolute;
  top: 0;
  left: 0px;
  right: 100px;
  bottom: 0;
  margin: auto;
  width: 450px;
  height: 350px;
  opacity: 0.8;
  border-radius: 5%;
  padding: 35px;
  background-color: rgb(237, 234, 234);
  box-shadow: 0 0 25px #cac6c6;
}
.login_box h1 {
  text-align: center;
  color: rgb(99, 97, 97);
}
.login_box1 {
  text-align: center;
  font-size: 35px;
  color: rgb(99, 97, 97);
}
.login_box1 input {
  margin-top: 50px;
  font-size: 25px;
  width: 250px;
  height: 30px;
  background-color: rgb(237, 234, 234);
  border: 2px solid rgb(99, 97, 97);
  border-radius: 10px 10px 10px 10px;
  color: rgb(99, 97, 97);
}
.login_box2 {
  text-align: center;
  font-size: 35px;
  color: rgb(99, 97, 97);
}
.login_box2 input {
  margin-top: 50px;
  font-size: 25px;
  width: 250px;
  height: 30px;
  background-color: rgb(237, 234, 234);
  border: 2px solid rgb(99, 97, 97);
  border-radius: 10px 10px 10px 10px;
  color: rgb(99, 97, 97);
}
.login_bt button {
  width: 100px;
  height: 50px;
  position: absolute;
  top: 250px;
  left: -200px;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 2px solid rgb(99, 97, 97);
  border-radius: 10px;
}
.login_bt1 button{
  width: 100px;
  height: 50px;
  position: absolute;
  top: 250px;
  left: 200px;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 2px solid rgb(99, 97, 97);
  border-radius: 10px;
}
</style>